<template>
	<view class="mainpadding">
		<view class="flexbetween">
			<view class="flexleft">
				<view :class="datecurrent==1?'select':'noselect'" style="margin-right: 15rpx;"
					@click="switchDate(1)">年</view>
				<view :class="datecurrent==2?'select':'noselect'" style="margin-right: 15rpx;"
					@click="switchDate(2)">月</view>
				<view :class="datecurrent==3?'select':'noselect'" style="margin-right: 15rpx;"
					@click="switchDate(3)">日</view>
			</view>
			<view class="flexleft selecttime_box radius" @click="shows = true">
				<u-icon name="calendar" color="#999" size="16"></u-icon>
				<view class="selecttime" style="margin-right: 20rpx;"></view>
				<view class="xiaohui">{{startime==""?"自定義時間":startime+"-"+endtime}}</view>
			</view>
		</view>
		<view class="margin_top ffffff radius flexbetween" style="padding: 30rpx 60rpx;">
			<view class="flexcolumn">
				<view class="xiaohui">訂單数</view>
				<view class="titletetx bold margin_top1 hei_text">2383</view>
			</view>
			<view class="flexcolumn">
				<view class="xiaohui">收益</view>
				<view class="titletetx bold margin_top1 hei_text">2383</view>
			</view>
			<view class="flexcolumn">
				<view class="xiaohui">上綫數</view>
				<view class="titletetx bold margin_top1 hei_text">2383</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius">
			<view class="flexbetween margin_bottom padding_bottom line_bottom">
				<view>
					<!-- <view class="titletetx bold hei_text">2002-02-23 11:20</view> -->
					<!-- <view class="flexleft">
						<view class="buyBox margin_right2">幫買</view>
						<view class="titletetx bold hei_text">2002-02-23 11:20</view>
					</view> -->
					<view class="flexleft">
						<view class="takeBox margin_right2" >幫取</view>
						<view class="titletetx bold hei_text">2002-02-23 11:20</view>
					</view>
				</view>
				<view class="text_ft color_red">$56</view>
			</view>
			<view class="flex">
				<view class="textcenter margin_right2">
					<image class="imgBox" src="/static/images/index/take.png" mode=""></image>
					<view class="text_a color_zero">2.3</view>
					<view class="text_a color_nine">km</view>
				</view>
				<view>
					<view class="text_ft color_three">杨国福麻辣烫</view>
					<view class="text_d color_nine margin_top2">北京北京市 大兴区亦庄经济技术开发区</view>
				</view>
			</view>
			<image class="fromImg " src="/static/images/index/from.png" mode=""></image>
			<view class="flex">
				<view class="textcenter margin_right2">
					<image class="imgBox" src="/static/images/index/deliver.png" mode=""></image>
					<view class="text_a color_zero">2.3</view>
					<view class="text_a color_nine">km</view>
				</view>
				<view>
					<view class="text_ft color_three">在等吃的</view>
					<view class="text_d color_nine margin_top2">北京北京市 大兴区亦庄经济技术开发区金海三路天骥智谷38号楼501</view>
				</view>
			</view>
			<view class="flexleft margin_top">
				<view class="specBox margin_right2">56kg</view>
				<view class="specBox">12*16*46＝126cm</view>
			</view>
			<!-- 備注 -->
			<view class="notes margin_top mainpadding text_c color_six">
				幫我带一瓶可口可乐，一定要是可口可乐哦~
			</view>
		</view>
		<!--日期 -->
		<!-- 开始時間 -->
		<u-datetime-picker :show="shows" v-model="value1" title="开始時間" mode="date" @confirm="confirmstart"
			@cancel="shows=false" ></u-datetime-picker>
		<!-- 结束時間 -->
		<u-datetime-picker :show="showss" v-model="value2" :minDate="mintime" title="结束時間" mode="date" @confirm="confirmend"
			@cancel="showss=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shows: false,
				showss: false,
				value1: new Date(),
				value2: new Date(),
				mintime: "", //最小時間
				startime: this.jinnian(),
				endtime: this.riqi(0),
				datecurrent: 1,
			}
		},
		methods: {
			//日期选择
			confirmstart(e) {
				this.shows = false
				this.showss = true
				this.mintime = e.value
				this.startime = httpRequest.returnDate(e.value)
			},
			confirmend(e) {
				this.showss = false
				this.endtime = httpRequest.returnDate(e.value)
				// console.log(this.endtime,"结束時間")
				this.init()
			},
			switchDate(value) {
				this.datecurrent = value
				if (value == 1) {
					// 獲取今年第一天和今天
					this.startime = this.jinnian()
					this.endtime = this.riqi(0);
					this.datetext = "今年"
				} else if (value == 2) {
					// 獲取本月第一天和今天
					this.startime = this.benyue();
					this.endtime = this.riqi(0);
					this.datetext = "本月"
				} else {
					// 獲取今日
					this.startime = this.riqi(0);
					this.endtime = this.riqi(0);
					this.datetext = "今日"
				}
				this.init()
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //獲取年份
				let m = new Date().getMonth() + 1; //獲取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 今年第一天
			jinnian() {
				let date1 = new Date();
				let year1 = date1.getFullYear();
				let firstMonth = year1 + '-' + '01' + '-' + '01';
				return firstMonth
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 选择時間盒子
	.selecttime_box {
		padding: 14rpx;
		border: 1rpx solid #e9e9e9;
	}
	.select {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #FFB800;
		background-color: #FFB800;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333;
	}

	.noselect {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}
	.imgBox {
		width: 40rpx;
		min-width: 40rpx;
		height: 40rpx;
	}
	
	.fromImg {
		width: 9rpx;
		height: 30rpx;
		margin-left: 15rpx;
	}
	
	.notes {
		background: #F5F6FA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	
	.specBox {
		padding: 10rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 1rpx solid #FF8505;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}
</style>
